<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>增强版通知系统测试</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <style>
        .test-panel {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
        }
        .status-indicator {
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-right: 8px;
        }
        .status-active { background-color: #28a745; }
        .status-inactive { background-color: #dc3545; }
        .log-area {
            background: #000;
            color: #00ff00;
            font-family: 'Courier New', monospace;
            font-size: 12px;
            padding: 15px;
            border-radius: 5px;
            height: 300px;
            overflow-y: auto;
        }
        .page-link {
            display: block;
            padding: 8px 12px;
            margin: 5px 0;
            background: #e9ecef;
            border-radius: 4px;
            text-decoration: none;
            color: #495057;
        }
        .page-link:hover {
            background: #dee2e6;
            color: #495057;
        }
    </style>
</head>
<body data-user-role="customer">
    <!-- 引入增强版全局通知组件 -->
    <div th:replace="~{common/enhanced-global-notification :: notification}"></div>

    <div class="container mt-4">
        <h1 class="mb-4">
            <i class="bi bi-bell-fill text-primary"></i> 增强版通知系统测试
        </h1>

        <!-- 系统状态 -->
        <div class="test-panel">
            <h3>系统状态</h3>
            <div class="row">
                <div class="col-md-6">
                    <p><span id="systemStatus" class="status-indicator status-inactive"></span>通知系统状态: <span id="systemStatusText">未启动</span></p>
                    <p><span id="pollingStatus" class="status-indicator status-inactive"></span>轮询状态: <span id="pollingStatusText">停止</span></p>
                    <p><span id="pageVisibility" class="status-indicator status-active"></span>页面可见性: <span id="pageVisibilityText">可见</span></p>
                </div>
                <div class="col-md-6">
                    <p>当前角色: <span id="currentRole" class="badge bg-info">未检测</span></p>
                    <p>当前页面: <span id="currentPage" class="badge bg-secondary">未知</span></p>
                    <p>未读通知数: <span id="unreadCount" class="badge bg-danger">0</span></p>
                </div>
            </div>
        </div>

        <!-- 控制面板 -->
        <div class="test-panel">
            <h3>控制面板</h3>
            <div class="row">
                <div class="col-md-6">
                    <h5>系统控制</h5>
                    <button id="startSystem" class="btn btn-success btn-sm me-2">启动通知系统</button>
                    <button id="stopSystem" class="btn btn-danger btn-sm me-2">停止通知系统</button>
                    <button id="checkNow" class="btn btn-primary btn-sm">立即检查</button>
                </div>
                <div class="col-md-6">
                    <h5>测试功能</h5>
                    <button id="showTestNotification" class="btn btn-warning btn-sm me-2">显示测试通知</button>
                    <button id="markAllRead" class="btn btn-info btn-sm me-2">标记全部已读</button>
                    <button id="clearLog" class="btn btn-secondary btn-sm">清空日志</button>
                </div>
            </div>
        </div>

        <!-- 页面导航测试 -->
        <div class="test-panel">
            <h3>页面导航测试</h3>
            <p>点击下面的链接测试不同页面的全局通知功能：</p>
            <div class="row">
                <div class="col-md-6">
                    <h5>用户页面</h5>
                    <a href="/customer/dashboard" class="page-link">
                        <i class="bi bi-house"></i> 用户仪表板
                    </a>
                    <a href="/customer/products" class="page-link">
                        <i class="bi bi-shop"></i> 商品列表
                    </a>
                    <a href="/customer/cart" class="page-link">
                        <i class="bi bi-cart"></i> 购物车
                    </a>
                    <a href="/customer/orders" class="page-link">
                        <i class="bi bi-receipt"></i> 订单管理
                    </a>
                    <a href="/customer/customer-service" class="page-link">
                        <i class="bi bi-headset"></i> 客服聊天（不显示弹窗）
                    </a>
                </div>
                <div class="col-md-6">
                    <h5>其他页面</h5>
                    <a href="/customer-service/dashboard" class="page-link">
                        <i class="bi bi-person-badge"></i> 客服工作台
                    </a>
                    <a href="/customer-service/conversations" class="page-link">
                        <i class="bi bi-chat-dots"></i> 客服对话列表
                    </a>
                    <a href="/test/notification-polling" class="page-link">
                        <i class="bi bi-arrow-clockwise"></i> 轮询测试页面
                    </a>
                </div>
            </div>
        </div>
        
        <!-- 实时日志 -->
        <div class="test-panel">
            <h3>实时日志</h3>
            <div id="logArea" class="log-area"></div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        let logArea;
        let statusUpdateInterval;

        document.addEventListener('DOMContentLoaded', function() {
            logArea = document.getElementById('logArea');
            
            // 绑定控制按钮
            bindControlButtons();
            
            // 开始状态监控
            startStatusMonitoring();
            
            // 监听页面可见性变化
            document.addEventListener('visibilitychange', function() {
                logMessage('页面可见性变化: ' + (document.hidden ? '隐藏' : '可见'));
            });
            
            logMessage('测试页面初始化完成');
        });

        function bindControlButtons() {
            document.getElementById('startSystem').addEventListener('click', function() {
                if (window.globalNotificationSystem) {
                    window.globalNotificationSystem.start();
                    logMessage('手动启动通知系统');
                } else {
                    logMessage('错误: 通知系统未加载');
                }
            });

            document.getElementById('stopSystem').addEventListener('click', function() {
                if (window.globalNotificationSystem) {
                    window.globalNotificationSystem.stop();
                    logMessage('手动停止通知系统');
                } else {
                    logMessage('错误: 通知系统未加载');
                }
            });

            document.getElementById('checkNow').addEventListener('click', function() {
                if (window.globalNotificationSystem) {
                    window.globalNotificationSystem.check();
                    logMessage('手动触发通知检查');
                } else {
                    logMessage('错误: 通知系统未加载');
                }
            });

            document.getElementById('showTestNotification').addEventListener('click', function() {
                if (window.globalNotificationSystem) {
                    const testNotification = {
                        id: 'test_' + Date.now(),
                        senderName: '测试用户',
                        messageContent: '这是一条测试通知消息',
                        notificationType: 'new_message',
                        relatedId: 'test_conversation',
                        createdTime: new Date().toISOString()
                    };
                    window.globalNotificationSystem.show(testNotification);
                    logMessage('显示测试通知: ' + JSON.stringify(testNotification));
                } else {
                    logMessage('错误: 通知系统未加载');
                }
            });

            document.getElementById('markAllRead').addEventListener('click', function() {
                if (window.globalNotificationSystem) {
                    window.globalNotificationSystem.markAllRead();
                    logMessage('标记所有通知为已读');
                } else {
                    logMessage('错误: 通知系统未加载');
                }
            });

            document.getElementById('clearLog').addEventListener('click', function() {
                logArea.innerHTML = '';
                logMessage('日志已清空');
            });
        }

        function startStatusMonitoring() {
            statusUpdateInterval = setInterval(updateStatus, 1000);
            updateStatus(); // 立即更新一次
        }

        function updateStatus() {
            if (window.globalNotificationSystem) {
                const state = window.globalNotificationSystem.getState();
                
                // 更新系统状态
                updateStatusIndicator('systemStatus', 'systemStatusText', state.isActive, '运行中', '已停止');
                updateStatusIndicator('pollingStatus', 'pollingStatusText', state.interval !== null, '轮询中', '已停止');
                updateStatusIndicator('pageVisibility', 'pageVisibilityText', state.isVisible, '可见', '隐藏');
                
                // 更新其他信息
                document.getElementById('currentRole').textContent = state.currentUserRole || '未检测';
                document.getElementById('currentPage').textContent = state.currentPage || '未知';
                document.getElementById('unreadCount').textContent = state.unreadCount || 0;
            } else {
                // 通知系统未加载
                updateStatusIndicator('systemStatus', 'systemStatusText', false, '运行中', '未加载');
                updateStatusIndicator('pollingStatus', 'pollingStatusText', false, '轮询中', '未加载');
            }
        }

        function updateStatusIndicator(indicatorId, textId, isActive, activeText, inactiveText) {
            const indicator = document.getElementById(indicatorId);
            const text = document.getElementById(textId);
            
            if (isActive) {
                indicator.className = 'status-indicator status-active';
                text.textContent = activeText;
            } else {
                indicator.className = 'status-indicator status-inactive';
                text.textContent = inactiveText;
            }
        }

        function logMessage(message) {
            const timestamp = new Date().toLocaleTimeString();
            const logEntry = `[${timestamp}] ${message}\n`;
            logArea.textContent += logEntry;
            logArea.scrollTop = logArea.scrollHeight;
        }

        // 拦截console.log来显示通知系统的日志
        const originalConsoleLog = console.log;
        console.log = function(...args) {
            originalConsoleLog.apply(console, args);
            if (args.length > 0 && typeof args[0] === 'string') {
                // 只记录通知相关的日志
                if (args[0].includes('通知') || args[0].includes('notification') || args[0].includes('Notification')) {
                    logMessage('系统日志: ' + args.join(' '));
                }
            }
        };

        // 页面卸载时清理
        window.addEventListener('beforeunload', function() {
            if (statusUpdateInterval) {
                clearInterval(statusUpdateInterval);
            }
        });
    </script>
</body>
</html> 